<script setup>
    import {ref,reactive} from 'vue'
    import productApi from '@/api/product/product'
    import searchApi from '@/api/product/search'
    import {useRoute} from 'vue-router'
    import ProductGrid from '@/components/ProductGrid.vue'

    const route = useRoute()

    const data = reactive({
        histories: [],
        keyword: '',
        current: 1,
        products: [],
        loading: false,
        finished: false
    })

    const getProducts = () => {

        //关键字没有输入不加载
        if(!data.keyword){
            data.loading = false
            return
        }

        searchApi.getProductPage({
            keyword:data.keyword,
            current:data.current
        }).then(response => {
            data.products.push(...response.data.records)

            data.loading = false

            if(response.data.total === data.products.length){
                data.finished = true
            }

            data.current++
        })
    }

    const handleSearch = () => {
        data.current = 1
        data.products = []
        data.finished = false

        addHistory(data.keyword)

        getProducts()
    }

    const addHistory = (history) => {
        if(history.trim() && data.histories.indexOf(history.trim()) < 0){
            data.histories.unshift(history.trim())
            localStorage.setItem("histories",data.histories.join("|"))
        }
    }

    const clearHistory = () => {
        data.histories = []
        localStorage.removeItem("histories")
    }

    const clickHistory = (history) => {
        data.keyword = history
        handleSearch()
    }

    if(localStorage.getItem("histories")){
        data.histories = localStorage.getItem("histories").split("|")
    }

</script>

<template>
	<van-nav-bar title="商品搜索" left-text="返回" left-arrow @click-left="$router.back()"/>

	<div class="item_search">
		<form action="/search">
			<van-search placeholder="请输入商品名称" v-model="data.keyword" @search="handleSearch" autofocus/>
		</form>
		<div class="item_search_content">
			<div class="item_search_text clearfix">
				<div class="float-l">历史搜索</div>
				<div class="float-r" @click="clearHistory">清空历史记录</div>
			</div>

			<div class="item_search_history">
				<van-tag color="#c8c9cc" text-color="white" @click="clickHistory(history)" v-for="history in data.histories">
					{{history}}
				</van-tag>
			</div>
		</div>

		<!--商品列表-->
        <van-list
                v-model:loading="data.loading"
                :finished="data.finished"
                finished-text="没有更多了"
                @load="getProducts"
        >
            <!--商品列表-->
            <ProductGrid :products="data.products"></ProductGrid>
        </van-list>

		<div v-show="!data.products">
			<van-empty description="抱歉,没有找到符合条件商品"/>
		</div>

	</div>
</template>

<style lang="scss" scoped>
	.item_search_content {
		padding: 15px 10px;
		background-color: #fff;
	}

	.item_search_text {
		margin-bottom: 10px;
	}

	.item_search_history > span {
		margin-right: 10px;
	}

	.product_wrap {
		margin-top: 8px;
	}

	.product_title {
		font-size: 14px;
		line-height: 30px;
		font-weight: 500;
		width: 100%;
	}

	.product_price {
		font-size: 20px;
		color: rgb(217, 61, 61);
		width: 100%;
		padding: 10px 0;
	}
</style>
